<template>
  <div class="app-top-nav">
    <div class="w">
      <ul>
        <template v-if="userinfo.token">
          <li>
            <a href="javascript:;" class="user-info" @click="goToUserProfile">
              <img v-if="userAvatar" :src="userAvatar" :alt="userNickname || userinfo.username" class="user-avatar" />
              <span class="username">{{ userNickname || userinfo.username }}</span>
            </a>
          </li>
          <li>
            <a href="javascript:;" @click="handleLogout">退出登录</a>
          </li>
        </template>
        <li v-else>
          <a href="javascript:;" @click="handleLogin">登录/注册</a>
        </li>
        <li>
          <a href="javascript:;" @click="goToOrders">我的订单</a>
        </li>
        <li>
          <a href="javascript:;">会员</a>
        </li>
        <li>
          <a href="javascript:;">甄选家</a>
        </li>
        <li>
          <a href="javascript:;">客户服务</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="iconfont icon-phone"></i>
            APP
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { getUserAvatar } from "@/api";

export default {
  setup(props) {
    const store = useStore();
    const router = useRouter();
    const userAvatar = ref('');
    const userNickname = ref('');
    
    let userinfo = computed(() => {
      return store.state.user.userinfo;
    });

    // 获取用户头像和昵称
    const fetchUserAvatar = async () => {
      try {
        if (userinfo.value.userId) {
          const res = await getUserAvatar(userinfo.value.userId);
          if (res.code === 200 && res.data) {
            userAvatar.value = res.data.avatar_url;
            userNickname.value = res.data.nickname; // 使用nickname作为用户名
          }
        }
      } catch (error) {
        console.error("获取用户头像失败:", error);
      }
    };

    // 跳转到用户信息页面
    const goToUserProfile = () => {
      router.push('/user/profile');
    };

    // 处理退出登录
    const handleLogout = () => {
      // 清除用户信息
      store.commit('user/updateUserInfo', {
        token: '',
        username: '',
        userId: ''
      });
      
      // 清除本地存储
      localStorage.removeItem('userInfo');
      
      // 清除头像和昵称
      userAvatar.value = '';
      userNickname.value = '';
      
      // 跳转到首页
      router.push('/');
    };

    // 处理登录跳转
    const handleLogin = () => {
      router.push('/login');
    };
    
    // 跳转到订单页面
    const goToOrders = () => {
      router.push('/orders');
    };

    // 监听用户信息变化
    watch(userinfo, (newVal) => {
      if (newVal.token) {
        fetchUserAvatar();
      } else {
        userAvatar.value = '';
        userNickname.value = '';
      }
    }, { deep: true });

    // 组件挂载时获取用户头像
    onMounted(() => {
      if (userinfo.value.token) {
        fetchUserAvatar();
      }
    });

    return { 
      userinfo,
      userAvatar,
      userNickname,
      goToUserProfile,
      handleLogout,
      handleLogin,
      goToOrders
    };
  }
};
</script>

<style lang="less" scoped>
// @import url('../assets/styles/variables.less');
.app-top-nav {
  background-color: #333;
  ul {
    display: flex;
    height: 40px;
    line-height: 40px;
    justify-content: flex-end;
    li {
      a {
        font-size: 12px;
        padding: 0 15px;
        color: #ccc;
        border-left: 1px solid #ccc;
        text-decoration: none;
        cursor: pointer;

        &:hover {
          color: @xtxColor;
        }
      }
      
      // 用户信息区域样式
      .user-info {
        display: flex;
        align-items: center;
        padding: 0 10px;
        
        .user-avatar {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 8px;
          object-fit: cover;
        }
        
        .username {
          color: #fff;
        }
      }
    }
    li:nth-child(1) {
      a {
        border-left: 0;
      }
    }
  }
}
</style>